<template>
    <div class="visitor">
        <div class="top">
            <div class="left">
                <div class="free">{{ user.isInsure == 0 ? '医保' : '自费' }}</div>
                <div class="username">{{ user.name }}</div>
            </div>
            <div class="right">
                <el-button circle type="primary" size="default" :icon="Edit" @click="handler"></el-button>
                <el-popconfirm :title="`你确定要删除${user.name}吗？`" width="250px" @confirm="removeUser">
                    <template #reference>
                        <el-button v-if="$route.path == '/user/patient'" circle type="danger" size="default"
                            :icon="Delete"></el-button>
                    </template>
                </el-popconfirm>

            </div>
        </div>
        <div class="bottom">
            <p>证件类型：{{ user.param.certificatesTypeString }}</p>
            <p>证件号码：{{ user.certificatesNo }}</p>
            <p>用户性别：{{ user.sex == 0 ? '男' : '女' }}</p>
            <p>出生日期：{{ user.birthdate }}</p>
            <p>手机号码：{{ user.phone }}</p>
            <p>婚姻状况：{{ user.isMarry == 0 ? '已婚' : '未婚' }}</p>
            <p>当前住址：{{ user.address }}</p>
            <p>详细地址：{{ user.param.fullAddress }}</p>
            <!-- 红色已选择的盒子 -->
            <div class="confirm" v-if="currentIndex === index">已选择</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router'
import { reqDeleteUser } from '@/api/user';
import { ElMessage } from 'element-plus';
const props = defineProps(["user", "currentIndex", "index"])
let $emit = defineEmits(['changeScene', 'removeUser'])
let $route = useRoute()
let $router = useRouter()

// 相应的就诊人组件按钮的回调
const handler = () => {
    if ($route.path == '/user/patient') {
        $emit('changeScene', props.user)
    } else {
        // 路由跳转携带参数
        $router.push({ path: '/user/patient', query: { type: 'edit', id: props.user.id } })
    }
}

// 删除某一个用户
const removeUser = async () => {
    try {
        await reqDeleteUser(props.user.id)
        ElMessage({
            type: 'success',
            message: '删除成功！'
        })
        $emit('removeUser')
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '删除失败！'
        })
    }
}
</script>

<style scoped lang="scss">
.visitor {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

    .top {
        height: 60px;
        background-color: #e5e5e5;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            .free {
                background-color: white;
                padding: 5px;
                font-size: 12px;
                border-radius: 10px;
            }

            .username {
                color: #7f7f7f;
                margin-left: 5px;
                line-height: 22px;
            }
        }
    }

    .bottom {
        position: relative;
        padding: 20px;

        p {
            line-height: 30px;
        }

        .confirm {
            position: absolute;
            width: 200px;
            line-height: 200px;
            color: red;
            border-radius: 50%;
            border: 1px dashed red;
            text-align: center;
            left: 15%;
            top: 15%;
            opacity: 0.3;
            transform: rotate(35deg);
            font-weight: bold;
        }
    }
}
</style>